﻿<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="Shortcut Icon" href="../images/aecc.ico" type="image/x-icon" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../StaticFiles/element-ui/element-ui.css">
  <link rel="stylesheet" href="../StaticFiles/nprogress/nprogress.min.css">
  <link rel="stylesheet" href="../styles/vue-page-common.css">
  <script src="../Scripts/vue.min.js"></script>
  <script src="../StaticFiles/element-ui/element-ui.js"></script>
  <script src="../Scripts/axios.min.js"></script>
  <script src="../StaticFiles/nprogress/nprogress.min.js"></script>
  <script src="../Scripts/crypto-js.js"></script>
  <script src="../Scripts/secret.js"></script>
  <script src="../Scripts/dayjs.min.js"></script>
  <script src="../Scripts/axios.config.js"></script>
  <script src="../Scripts/datav.min.vue.js"></script>
  <script src="../Scripts/lodash.min.js"></script>
  <title>转工排产趋势统计</title>
  <style>
    html {
      background-image: url(../images/bg.jpg);
      color: #fff;
    }

    .el-form-item__label {
      color: #fff;
    }
  </style>
</head>

<body>
  <div id="app" v-cloak>
    <div style="padding:0 5px;">
      <!-- 看板标题组件 -->
      <vue2-board-header :title="'转工排产趋势统计'"></vue2-board-header>
      <!-- 查询条件区 -->
      <el-form :inline="true" :model="queryInfo" ref="queryInfoRef" :label-position="'left'"
        style="margin:5px 0 0 5px;">
        <el-form-item label="主制分厂">
          <el-select v-model="queryInfo.fromfactoryCodeList" placeholder="请选择" multiple collapse-tags>
            <el-option v-for="f in fromFactoryList" :key="f.attributevalue" :label="f.factoryname"
              :value="f.attributevalue">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="承制分厂">
          <el-select v-model="queryInfo.tofactoryCode" placeholder="请选择" filterable style="width:160px;"
            @change="tofactoryChange">
            <el-option v-for="f in toFactoryList" :key="f.attributevalue" :label="f.factoryname"
              :value="f.attributevalue">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="统计方式">
          <el-select v-model="queryInfo.selecttype" placeholder="请选择" filterable style="width:100px;"
            @change="selecttypeChange">
            <el-option v-for="i in selecttypeList" :key="i.selecttype" :label="i.selecttype" :value="i.selecttype">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="承制分厂基准值">
          <el-slider v-model="toFactoryAvgValue" show-input style="width: 230px;">
          </el-slider>
        </el-form-item>

        <el-form-item label="主制分厂基准值">
          <el-slider v-model="fromFactoryAvgValue" show-input style="width: 230px;">
          </el-slider>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" :icon="'Search'" size="default" @click="handleBtnSearch">查询</el-button>
        </el-form-item>
      </el-form>

      <el-row>
        <el-col :span="8">
          <dv-border-box-11 :title="rbChartTitle">
            <div style="height: 340px;padding-top: 40px;" id="rbChart"></div>
          </dv-border-box-11>
        </el-col>
        <el-col :span="8">
          <dv-border-box-11 title="燃烧准时发出率">
            <div style="height: 340px;padding-top: 40px;" id="607"></div>
          </dv-border-box-11>
        </el-col>
        <el-col :span="8" v-show="queryInfo.fromfactoryCodeList.includes('601')">
          <dv-border-box-11 title="机匣准时发出率">
            <div style="height: 340px;padding-top: 40px;" id="601"></div>
          </dv-border-box-11>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8" v-show="queryInfo.fromfactoryCodeList.includes('600')">
          <dv-border-box-11 title="盘轴准时发出率">
            <div style="height: 340px;padding-top: 40px;" id="600"></div>
          </dv-border-box-11>
        </el-col>
        <el-col :span="8" v-show="queryInfo.fromfactoryCodeList.includes('609')">
          <dv-border-box-11 title="结构件准时发出率">
            <div style="height: 340px;padding-top: 40px;" id="609"></div>
          </dv-border-box-11>
        </el-col>
        <el-col :span="8" v-show="queryInfo.fromfactoryCodeList.includes('608')">
          <dv-border-box-11 title="叶片准时发出率">
            <div style="height: 340px;padding-top: 40px;" id="608"></div>
          </dv-border-box-11>
        </el-col>
      </el-row>

      <!-- 热表柱状图 -->
      <el-dialog :title="toFactroyBarChartTitle" :width="'80%'" :top="'10px'" :center="true"
        :visible.sync="toFactroyBarChartVisiable" @opened="rbBarChartDialogOpened">
        <div id="toFactoryBarChart" style="width:100%;height:500px;"></div>
      </el-dialog>

      <!-- 机加柱状图 -->
      <el-dialog :title="fromFactroyBarChartTitle" :width="'80%'" :top="'10px'" :center="true"
        :visible.sync="fromFactroyBarChartVisiable" @opened="jiJiaBarChartDialogOpened">
        <div id="fromFactoryBarChart" style="width:100%;height:500px;"></div>
      </el-dialog>

      <!-- 机加明细 -->
      <el-dialog :title="JijiaDetail.title" :width="'100%'" :top="'10px'" :center="true"
        :visible.sync="JijiaDetail.dialogVisiable">
        <el-table v-loading="loading" v-loading.fullscreen.lock="loading" :element-loading-text="loadingText"
          element-loading-background="rgba(0,0,0,0.8)" :data="JijiaDetail.dataList" stripe border>
          <el-table-column type="index" width="40"></el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-download" size="mini" @click="exportJijiaDetail">
                导出
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="主制分厂" prop="factoryname" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column label="零件图号" prop="productname" width="140" show-overflow-tooltip></el-table-column>
          <el-table-column label="零件名称" prop="productdescription" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="流水卡号" prop="containername" show-overflow-tooltip></el-table-column>
          <el-table-column label="当前工序" prop="currentspec" show-overflow-tooltip width="120"></el-table-column>
          <el-table-column label="数量" prop="qty" width="60"></el-table-column>
          <el-table-column label="转工工序" prop="workflowstepname" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column label="接收人" prop="receiver" width="80"></el-table-column>
          <el-table-column label="接收时间" prop="recivedate" width="100" :formatter="splitDate"></el-table-column>
          <el-table-column label="转工状态" prop="status" width="80"></el-table-column>
          <el-table-column label="机加排产时间" prop="stepplancreatedate" width="100" :formatter="splitDate">
          </el-table-column>
          <el-table-column label=" 承制分厂排产时间" prop="stepplanshipdate" width="100" :formatter="splitDate">
          </el-table-column>
          <el-table-column label="机加排产人" prop="jjplaner" width="90"></el-table-column>
          <el-table-column label="排产状态" width="80">
            <template slot-scope="scope">
              <div v-if='scope.row.planstatus === "未排产"'>
                <el-tag type='danger'>未排产</el-tag>
              </div>
              <div v-else>
                <el-tag type="success">已排产</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="其他信息" width="80" type="expand">
            <template slot-scope="props">
              <el-descriptions title="其他转工信息" direction="vertical" border :column="8" :contentStyle="{'height':'30px'}"
                style="padding:10px;">
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-user-solid"></i> 承制分厂排产人
                  </template>
                  {{props.row.rbplaner}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-user-tickets"></i> 责任工区
                  </template>
                  {{props.row.fromworkcentername}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <el-popover placement="top-start" title="计划发出时间" width="300" trigger="hover"
                      content="机加分厂在转工排产时填写的时间">
                      <i class="el-icon-info" slot="reference"></i>
                    </el-popover>
                    计划发出时间
                  </template>
                  <span v-if="props.row.plannedstartdate">{{props.row.plannedstartdate.split('T')[0]}}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <el-popover placement="top-start" title="计划完成时间" width="300" trigger="hover"
                      content="承制分厂在转工排产时填写的时间">
                      <i class="el-icon-info" slot="reference"></i>
                    </el-popover>
                    计划完成时间
                  </template>
                  <span v-if="props.row.plannedfinishdate">{{props.row.plannedfinishdate.split('T')[0]}}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <el-popover placement="top-start" title="要求完成时间" width="300" trigger="hover"
                      content="机加分厂在转工转出时需要填写的时间">
                      <i class="el-icon-info" slot="reference"></i>
                    </el-popover>
                    要求完成时间
                  </template>
                  <span v-if="props.row.needcompletedate">{{props.row.needcompletedate.split('T')[0]}}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <el-popover placement="top-start" title="实际发出时间" width="300" trigger="hover"
                      content="机加分厂实际转工转出的时间">
                      <i class="el-icon-info" slot="reference"></i>
                    </el-popover>
                    实际发出时间
                  </template>
                  <span v-if="props.row.senddate">{{props.row.senddate.split('T')[0]}}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <el-popover placement="top-start" title="预计完成时间" width="300" trigger="hover"
                      content="承制分厂在转工接收时需要填写的时间">
                      <i class="el-icon-info" slot="reference"></i>
                    </el-popover>
                    预计完成时间
                  </template>
                  <span v-if="props.row.estimatedcompletedate">{{props.row.estimatedcompletedate.split('T')[0]}}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <el-popover placement="top-start" title="完成时间" width="300" trigger="hover" content="承制分厂转工实际完成的时间">
                      <i class="el-icon-info" slot="reference"></i>
                    </el-popover>
                    完成时间
                  </template>
                  <span v-if="props.row.completedate">{{props.row.completedate.split('T')[0]}}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <el-popover placement="top-start" title="转入时间" width="300" trigger="hover" content="机加分厂转回到本分厂的时间">
                      <i class="el-icon-info" slot="reference"></i>
                    </el-popover>
                    转入时间
                  </template>
                  <span v-if="props.row.shipindate">{{props.row.shipindate.split('T')[0]}}</span>
                </el-descriptions-item>
                <el-descriptions-item label-class-name="red" content-class-name="red">
                  <template slot="label">
                    <el-popover placement="top-start" title="拒收时间" width="300" trigger="hover" content="承制分厂拒绝接收的时间">
                      <i class="el-icon-info" slot="reference"></i>
                    </el-popover>
                    拒收时间
                  </template>
                  <span v-if="props.row.denydate">{{props.row.denydate.split('T')[0]}}</span>
                </el-descriptions-item>
                <el-descriptions-item label-class-name="red" content-class-name="red">
                  <template slot="label">
                    <i class="el-icon-user-solid"></i> 拒收人
                  </template>
                  {{props.row.denyer}}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="red" content-class-name="red">
                  <template slot="label">
                    <i class="el-icon-tickets"></i> 拒收原因
                  </template>
                  {{props.row.denyreason}}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="red" content-class-name="red">
                  <template slot="label">
                    <el-popover placement="top-start" title="完成超期时间" width="300" trigger="hover"
                      content="若承制分厂已完成，完成超期时间 = 完成时间 - 要求完成日期。若承制分厂未完成，完成超期时间 = 当前时间 - 要求完成时间。">
                      <i class="el-icon-info" slot="reference"></i>
                    </el-popover>
                    完成超期时间
                  </template>
                  {{props.row.delay}}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="red" content-class-name="red">
                  <template slot="label">
                    <el-popover placement="top-start" title="发出超期时间" width="300" trigger="hover"
                      content="发出超期时间 = 接收时间 - 计划发出时间">
                      <i class="el-icon-info" slot="reference"></i>
                    </el-popover>
                    发出超期时间
                  </template>
                  {{props.row.sendoutdelay}}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <el-popover placement="top-start" title="发出提前时间" width="300" trigger="hover"
                      content="发出提前时间 = 计划发出时间 - 接收时间">
                      <i class="el-icon-info" slot="reference"></i>
                    </el-popover>
                    发出提前时间
                  </template>
                  {{props.row.presend}}
                </el-descriptions-item>
              </el-descriptions>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination @current-change="handleJiJiaDetailCurrentChange"
          :current-page="JijiaDetail.queryInfo.currentPage" :page-sizes="[JijiaDetail.queryInfo.pageSize]"
          :page-size="JijiaDetail.queryInfo.pageSize" layout="prev,pager,next,jumper,sizes,total"
          :total="JijiaDetail.total">
        </el-pagination>
      </el-dialog>

      <!-- 热表明细 -->
      <el-dialog :title="RbDetail.title" :width="'100%'" :top="'10px'" :center="true"
        :visible.sync="RbDetail.dialogVisiable">
        <el-table v-loading="loading" v-loading.fullscreen.lock="loading" :element-loading-text="loadingText"
          element-loading-background="rgba(0,0,0,0.8)" :data="RbDetail.dataList" stripe border>
          <el-table-column type="index" width="40"></el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-download" size="mini" @click="exportRbDetail">
                导出
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="主制分厂" prop="fromfactory" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column label="承制分厂" prop="tofactory" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column label="零件图号" prop="productname" width="140" show-overflow-tooltip></el-table-column>
          <el-table-column label="零件名称" prop="productdescription" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="流水卡号" prop="containername" show-overflow-tooltip width="200"></el-table-column>
          <el-table-column label="数量" prop="qty" width="50"></el-table-column>
          <el-table-column label="排产工序" prop="workflowstepname" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column label="排产日期" prop="stepplancreatedate" width="100" :formatter="splitDate"></el-table-column>
          <el-table-column label="计划发出时间" prop="plannedstartdate" width="100" :formatter="splitDate"></el-table-column>
          <el-table-column label="实际发出时间" prop="senddate" width="100" :formatter="splitDate"></el-table-column>
          <el-table-column label="接收时间" prop="toacceptdate" width="100" :formatter="splitDate"></el-table-column>
          <el-table-column label="接收人" prop="receiver" width="60"></el-table-column>
          <el-table-column label="计划完成时间" prop="plannedfinishdate" width="100" :formatter="splitDate">
          </el-table-column>
          <el-table-column label="实际完成时间" prop="completedate" width="100" :formatter="splitDate"></el-table-column>
          <el-table-column label="转入时间" prop="recivedate" width="100" :formatter="splitDate"></el-table-column>
          <el-table-column label="当前工序" prop="currentworkflowstepname" width="120" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="完成超期时间" prop="finishdelaydays" width="100">
            <template slot-scope="scope">
              <div v-if="scope.row.finishdelaydays > 0" style="color:red;font-weight:bold;">
                <i class="el-icon-warning"></i> {{scope.row.finishdelaydays}}天
              </div>
              <div v-else>
                {{scope.row.finishdelaydays}}
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @current-change="handleRbDetailCurrentChange" :current-page="RbDetail.queryInfo.currentPage"
          :page-sizes="[RbDetail.queryInfo.pageSize]" :page-size="RbDetail.queryInfo.pageSize"
          layout="prev,pager,next,jumper,sizes,total" :total="RbDetail.total">
        </el-pagination>
      </el-dialog>
    </div>
  </div>
  <script src="../Scripts/echarts/echarts-5.4.0.min.js"></script>
  <script type="module">
    import { barOption, colorList } from '../Scripts/hooks/chartConfig.js'
    import { exportExcelData } from '../Scripts/hooks/useCommonMethod.js'
    import { splitDate } from '../Scripts/hooks/format.js'
    import Vue2BoardHeader from '../Scripts/components/Vue2BoardHeader.js'
    const app = new Vue({
      el: '#app',
      components: { Vue2BoardHeader },
      data: {
        splitDate,
        loading: false,
        loadingText: '数据加载中...',
        queryInfo: {
          fromfactoryCodeList: ['600', '601', '607', '609', '608'],
          tofactoryCode: '602',
          tofactoryname: '热表分厂',
          selecttype: '按周',
          selectdate: []
        },
        fromFactoryList: [],//主制分厂列表
        toFactoryList: [],//承制分厂列表

        toFactoryAvgValue: 95,//承制分厂基准值
        fromFactoryAvgValue: 60,//主制分厂基准值

        weekList: [],//周
        monthList: [],//月份

        quaterList: [],//季度
        yearList: [],//年份

        selecttypeList: [{ selecttype: '按周' }, { selecttype: '按月' }, { selecttype: '按季度' }, { selecttype: '按年' }],
        rbChartTitle: '热表分厂完成率',

        toFactroyBarChartVisiable: false,
        fromFactroyBarChartVisiable: false,

        toFactoryDataCache: [],// 承制分厂数据统计缓存
        fromFactoryDataCache: [],// 主制分厂统计数据缓存

        toFactroyBarChartTitle: '',// 承制分厂柱状图title
        fromFactroyBarChartTitle: '',//主制分厂柱状图title

        JijiaDetail: {
          dialogVisiable: false,
          queryInfo: {
            fromfactoryCode: '',
            tofactoryCode: '',
            seriesName: '',
            selectdate: '',
            title: '',
            currentPage: 1,//当前页
            pageSize: 12//每页显示条数
          },
          dataList: [],
          total: 0,
          title: ''
        },
        RbDetail: {
          dialogVisiable: false,
          queryInfo: {
            fromfactoryCodeList: '',
            tofactoryCode: '',
            seriesName: '',
            selectdate: '',
            title: '',
            currentPage: 1,//当前页
            pageSize: 12//每页显示条数
          },
          dataList: [],
          total: 0,
          title: ''
        }
      },
      methods: {
        // 获取主制分厂
        async getFromFactoryList() {
          const { data: res } = await axios({
            method: 'POST',
            url: '../handler/report/CommonActionHandle.ashx?action=getJiJiaFactoryList',
            data: {
              type: 'getFactoryListByCode',
              factoryCode: '600|601|607|608|609'
            }
          })
          this.fromFactoryList = res.data;
        },
        // 获取承制分厂
        async getToFactoryList() {
          const { data: res } = await axios({
            method: 'POST',
            url: '../handler/report/CommonActionHandle.ashx?action=getRbFactoryList',
            data: {
              type: 'getFactoryListByCode',
              factoryCode: '600|601|607|608|609|305|602'
            }
          })
          this.toFactoryList = res.data;
        },
        // 周列表：本周及本周前3周
        setWeekList() {
          const lastSaturday = dayjs().startOf('week').subtract(1, 'day').format('YYYY-MM-DD');
          const thisFriday = dayjs().startOf('week').add(5, 'day').format('YYYY-MM-DD');
          for (let i = 0; i < 4; i++) {
            let start = dayjs(lastSaturday).subtract(7 * i, 'day').format('YYYY-MM-DD');
            let end = dayjs(thisFriday).subtract(7 * i, 'day').format('YYYY-MM-DD');
            if (i === 0) {
              this.weekList.unshift({ lable: '本周', value: `${start}~${end}` });
            } else if (i === 1) {
              this.weekList.unshift({ lable: '上周', value: `${start}~${end}` });
            } else {
              this.weekList.unshift({ lable: `${i}周前`, value: `${start}~${end}` });
            }
          }
        },
        // 月列表：本年1月~本月
        setMonthList() {
          for (let i = 0; i < (dayjs().month() + 1); i++) {
            let start = dayjs().startOf('month').subtract(i, 'month').format('YYYY-MM-DD');
            let end = dayjs().startOf('month').subtract(i, 'month').endOf('month').format('YYYY-MM-DD');
            this.monthList.unshift({ lable: `${dayjs(start).month() + 1}月`, value: `${start}~${end}` });
          }
        },
        // 季度：本年1季度--本季度
        setQuaterList() {
          let month = dayjs().month() + 1;
          for (let i = 0; i < (Math.ceil(month / 3)); i++) {
            let start = dayjs().startOf('year').add(3 * i, 'month').format('YYYY-MM-DD');
            let end = dayjs().startOf('year').add(3 * (i + 1), 'month').subtract(1, 'day').endOf('month').format('YYYY-MM-DD');
            this.quaterList.unshift({ lable: `${i + 1}季度`, value: `${start}~${end}` });
          }
        },
        // 年：前年、去年、今年
        setYearList() {
          const startOfYear = dayjs().startOf('year').format('YYYY-MM-DD');
          const endOfYear = dayjs().endOf('year').format('YYYY-MM-DD');
          for (let i = 0; i < 3; i++) {
            let start = dayjs(startOfYear).subtract(i, 'year').format('YYYY-MM-DD');
            let end = dayjs(endOfYear).subtract(i, 'year').format('YYYY-MM-DD');
            this.yearList.unshift({ lable: `${dayjs(start).year()}年`, value: `${start}~${end}` });
          }
        },
        // 机加分厂 发出率统计
        async getFromFactoryData() {
          this.loading = true;
          this.loadingText = '数据加载中...';
          const selecttype = this.queryInfo.selecttype;
          const fromfactoryCodeList = this.queryInfo.fromfactoryCodeList;

          if (selecttype === '按周') {
            this.queryInfo.selectdate = this.weekList;
          } else if (selecttype === '按月') {
            this.queryInfo.selectdate = this.monthList;
          } else if (selecttype === '按季度') {
            this.queryInfo.selectdate = this.quaterList;
          } else {
            this.queryInfo.selectdate = this.yearList;
          }

          let loadingOpt = { text: '数据查询中...', effect: 'whirling', maskColor: 'transparent', textColor: '#ffffff', color: '#66b1ff' };

          for (let index = 0; index < fromfactoryCodeList.length; index++) {
            echarts.dispose(document.getElementById(fromfactoryCodeList[index]));
            let chart = echarts.init(document.getElementById(fromfactoryCodeList[index]));
            chart.showLoading(loadingOpt);
          }

          const { data: res } = await axios({
            url: '../handler/board/ContainerShipPlanTrendDashBoard.ashx?actions=getJiJiaData',
            method: 'post',
            data: { ...this.queryInfo, type: 'getFromFactoryData' }
          })
          this.loading = false;

          if (res.meta.status === 500) { return this.$message.error(res.meta.msg) }
          if (!res.data) { return this.$message.error('查无数据'); }

          // 缓存主制分厂及时发出率数据
          this.fromFactoryDataCache = res.data;

          this.setChart('607', res.data);//燃烧
          this.setChart('601', res.data);//机匣
          this.setChart('600', res.data);//盘轴
          this.setChart('609', res.data);//结构件
          this.setChart('608', res.data);//叶片
        },
        // 热表分厂 完成率统计
        async getToFactoryData() {
          this.loading = true;
          this.loadingText = '数据加载中...';
          const selecttype = this.queryInfo.selecttype;

          if (selecttype === '按周') {
            this.queryInfo.selectdate = this.weekList;
          } else if (selecttype === '按月') {
            this.queryInfo.selectdate = this.monthList;
          } else if (selecttype === '按季度') {
            this.queryInfo.selectdate = this.quaterList;
          } else {
            this.queryInfo.selectdate = this.yearList;
          }

          let loadingOpt = { text: '数据查询中...', effect: 'whirling', maskColor: 'transparent', textColor: '#ffffff', color: '#66b1ff' };

          echarts.dispose(document.getElementById('rbChart'));
          let chart = echarts.init(document.getElementById('rbChart'));
          chart.showLoading(loadingOpt);

          const { data: res } = await axios({
            url: '../handler/board/ContainerShipPlanTrendDashBoard.ashx?actions=getRbData',
            method: 'post',
            data: { ...this.queryInfo, type: 'getToFactoryData' }
          })
          this.loading = false;
          if (res.meta.status === 500) { return this.$message.error(res.meta.msg) }
          if (!res.data) { return this.$message.error('查无数据'); }

          // 缓存承制分厂 及时完成率数据
          this.toFactoryDataCache = res.data;

          echarts.dispose(document.getElementById('rbChart'));
          chart = echarts.init(document.getElementById('rbChart'));

          let arrDate = [], arrFinishIntimeRate = [], arrStandVal = [];

          res.data.filter(item => {
            arrDate.push(item.selectdate);
            arrFinishIntimeRate.push(item.finishintimerate);
            arrStandVal.push(this.toFactoryAvgValue);
          })

          let option = barOption();
          option.legend.data = ['准时完成率', '基准值'];
          option.xAxis.data = arrDate;
          // x轴显示
          option.xAxis.axisLabel.formatter = (value, index) => {
            if (selecttype === '按周') {
              return this.weekList.filter(item => item.value === value)[0].lable;
            } else if (selecttype === '按月') {
              return this.monthList.filter(item => item.value === value)[0].lable;
            } else if (selecttype === '按季度') {
              return this.quaterList.filter(item => item.value === value)[0].lable;
            } else {
              return this.yearList.filter(item => item.value === value)[0].lable;
            }
          }
          option.yAxis[0].axisLabel.formatter = function (data) { return data + "%" };
          option.yAxis[1].show = false;

          option.series[0].name = "准时完成率";
          option.series[0].data = arrFinishIntimeRate;
          option.series[0].label.formatter = '{c}%';
          option.series[0].type = 'line';
          option.series[0].symbolSize = 8;
          option.series[0].lineStyle = { width: 3, color: colorList.green.color };
          option.series[0].label.color = colorList.green.color;
          option.series[0].itemStyle.color.colorStops = colorList.green.colorStops;

          option.series[1] = _.cloneDeep(option.series[0]);
          option.series[1].name = "基准值";
          option.series[1].data = arrStandVal;
          option.series[1].label.show = false;
          option.series[1].type = 'line';
          option.series[1].symbolSize = 3;
          option.series[1].lineStyle = { type: 'solid', width: 2, color: colorList.blue.color };
          option.series[1].label.color = colorList.blue.color;
          option.series[1].itemStyle.color.colorStops = colorList.blue.colorStops;
          chart.setOption(option);
          chart.on('click', (params) => {
            if (params.seriesName === '基准值') return this.$message.error('基准值仅供显示，无明细信息!');
            this.toFactroyBarChartVisiable = true;
            let factoryname = this.toFactoryList.filter(item => item.attributevalue === this.queryInfo.tofactoryCode)[0].factoryname;
            this.toFactroyBarChartTitle = `【${factoryname}】【${this.queryInfo.selecttype}】详情`;
          });
        },
        // 机加生成折线图 通用方法
        setChart(chartID, res) {
          let selecttype = this.queryInfo.selecttype;

          echarts.dispose(document.getElementById(chartID));
          let chart = echarts.init(document.getElementById(chartID));
          let arrDate = [], arrSendOutIntimeRate = [], arrStandVal = [];

          res.filter(item => {
            if (item.factorycode === chartID) {
              arrDate.push(item.selectdate);
              arrSendOutIntimeRate.push(item.sendoutintimerate);
              arrStandVal.push(this.fromFactoryAvgValue);
            }
          })

          let option = barOption();
          option.legend.data = ['准时发出率', '基准值'];
          option.xAxis.data = arrDate;
          // x轴显示
          option.xAxis.axisLabel.formatter = (value, index) => {
            if (selecttype === '按周') {
              return this.weekList.filter(item => item.value === value)[0].lable;
            } else if (selecttype === '按月') {
              return this.monthList.filter(item => item.value === value)[0].lable;
            } else if (selecttype === '按季度') {
              return this.quaterList.filter(item => item.value === value)[0].lable;
            } else {
              return this.yearList.filter(item => item.value === value)[0].lable;
            }
          }
          option.yAxis[0].axisLabel.formatter = function (data) { return data + "%" };
          option.yAxis[1].show = false;

          option.series[0].name = "准时发出率";
          option.series[0].data = arrSendOutIntimeRate;
          option.series[0].label.formatter = '{c}%';
          option.series[0].type = 'line';
          option.series[0].symbolSize = 8;
          option.series[0].lineStyle = { width: 3, color: colorList.green.color };
          option.series[0].label.color = colorList.green.color;
          option.series[0].itemStyle.color.colorStops = colorList.green.colorStops;

          option.series[1] = _.cloneDeep(option.series[0]);
          option.series[1].name = "基准值";
          option.series[1].data = arrStandVal;
          option.series[1].label.show = false;
          option.series[1].type = 'line';
          option.series[1].symbolSize = 3;
          option.series[1].lineStyle = { type: 'solid', width: 2, color: colorList.blue.color };
          option.series[1].label.color = colorList.blue.color;
          option.series[1].itemStyle.color.colorStops = colorList.blue.colorStops;
          chart.setOption(option);
          chart.on('click', (params) => {
            if (params.seriesName === '基准值') return this.$message.error('基准值仅供显示，无明细信息!');
            this.fromFactroyBarChartVisiable = true;
            let factoryname = this.fromFactoryList.filter(item => item.attributevalue === chartID)[0].factoryname;
            this.fromFactroyBarChartTitle = `【${factoryname}】【${selecttype}】详情`;
          });
        },
        // 机加分厂 柱状图
        jiJiaBarChartDialogOpened() {
          let selecttype = this.queryInfo.selecttype;
          let factoryname = this.fromFactroyBarChartTitle.split('】')[0].replace('【', '');
          let fromfactoryCode = this.fromFactoryList.filter(item => item.factoryname === factoryname)[0].attributevalue;

          echarts.dispose(document.getElementById('fromFactoryBarChart'));
          let chart = echarts.init(document.getElementById('fromFactoryBarChart'));

          let arrDate = [], arrPlan = [], arrFinish = [];

          this.fromFactoryDataCache.filter(item => {
            if (item.factoryname === factoryname) {
              arrDate.push(item.selectdate);
              arrPlan.push(item.sendoutplanqty);
              arrFinish.push(item.sendoutintimeqty);
            }
          });

          let option = barOption({ themeColor: 'dark' });
          option.legend.data = ['计划发出数', '准时发出数'];
          option.xAxis.data = arrDate;
          option.yAxis[1].show = false;
          option.yAxis[0].splitLine.show = true;

          // x轴显示
          option.xAxis.axisLabel.formatter = (value, index) => {
            if (selecttype === '按周') {
              return this.weekList.filter(item => item.value === value)[0].lable;
            } else if (selecttype === '按月') {
              return this.monthList.filter(item => item.value === value)[0].lable;
            } else if (selecttype === '按季度') {
              return this.quaterList.filter(item => item.value === value)[0].lable;
            } else {
              return this.yearList.filter(item => item.value === value)[0].lable;
            }
          }

          option.series[0].name = "计划发出数";
          option.series[0].data = arrPlan;
          option.series[0].label.color = colorList.blue.color;
          option.series[0].itemStyle.color.colorStops = colorList.blue.colorStops;

          option.series[1] = _.cloneDeep(option.series[0]);
          option.series[1].name = "准时发出数";
          option.series[1].data = arrFinish;
          option.series[1].label.color = colorList.green.color;
          option.series[1].itemStyle.color.colorStops = colorList.green.colorStops;
          chart.setOption(option);
          chart.on('click', (params) => {
            let title = `${params.name}【${factoryname}】${params.seriesName}明细`;
            this.JijiaDetail.queryInfo.currentPage = 1;
            this.JijiaDetail.queryInfo.seriesName = params.seriesName;
            this.JijiaDetail.queryInfo.fromfactoryCode = fromfactoryCode;//机加分厂
            this.JijiaDetail.queryInfo.tofactoryCode = this.queryInfo.tofactoryCode;//承制分厂
            this.JijiaDetail.queryInfo.selectdate = params.name;//时间
            this.JijiaDetail.queryInfo.title = title;
            this.JijiaDetail.title = title;
            this.JijiaDetail.dialogVisiable = true
            this.getJiJiaDetail()
          });
        },
        // 热表分厂 柱状图
        rbBarChartDialogOpened() {
          let selecttype = this.queryInfo.selecttype;
          echarts.dispose(document.getElementById('toFactoryBarChart'));
          let chart = echarts.init(document.getElementById('toFactoryBarChart'));

          let arrDate = [], arrPlan = [], arrFinish = [];

          this.toFactoryDataCache.forEach(item => {
            arrDate.push(item.selectdate);
            arrPlan.push(item.finishplanqty);
            arrFinish.push(item.finishintimeqty);
          });

          let option = barOption({ themeColor: 'dark' });
          option.legend.data = ['计划完成数', '准时完成数'];
          option.xAxis.data = arrDate;
          option.yAxis[1].show = false;
          option.yAxis[0].splitLine.show = true;

          // x轴显示
          option.xAxis.axisLabel.formatter = (value, index) => {
            if (selecttype === '按周') {
              return this.weekList.filter(item => item.value === value)[0].lable;
            } else if (selecttype === '按月') {
              return this.monthList.filter(item => item.value === value)[0].lable;
            } else if (selecttype === '按季度') {
              return this.quaterList.filter(item => item.value === value)[0].lable;
            } else {
              return this.yearList.filter(item => item.value === value)[0].lable;
            }
          }

          option.series[0].name = "计划完成数";
          option.series[0].data = arrPlan;
          option.series[0].label.color = colorList.blue.color;
          option.series[0].itemStyle.color.colorStops = colorList.blue.colorStops;

          option.series[1] = _.cloneDeep(option.series[0]);
          option.series[1].name = "准时完成数";
          option.series[1].data = arrFinish;
          option.series[1].label.color = colorList.green.color;
          option.series[1].itemStyle.color.colorStops = colorList.green.colorStops;
          chart.setOption(option);
          chart.on('click', (params) => {
            let factoryname = this.toFactoryList.filter(item => item.attributevalue === this.queryInfo.tofactoryCode)[0].factoryname;
            let title = `${params.name}【${factoryname}】${params.seriesName}明细`;
            this.RbDetail.queryInfo.currentPage = 1;
            this.RbDetail.queryInfo.seriesName = params.seriesName;
            this.RbDetail.queryInfo.tofactoryCode = this.queryInfo.tofactoryCode;//承制分厂
            this.RbDetail.queryInfo.fromfactoryCodeList = this.queryInfo.fromfactoryCodeList;//主制分厂列表
            this.RbDetail.queryInfo.selectdate = params.name;//时间
            this.RbDetail.queryInfo.title = title;
            this.RbDetail.title = title;
            this.RbDetail.dialogVisiable = true
            this.getRbDetail();
          });
        },
        // 机加明细
        async getJiJiaDetail() {
          this.loading = true
          this.loadingText = '数据加载中...'
          const { data: res } = await axios.post('../handler/board/ContainerShipPlanTrendDashBoard.ashx?action=getJiJiaDetail', {
            type: 'getJiJiaDetail',
            ...this.queryInfo,
            ...this.JijiaDetail.queryInfo
          });
          this.loading = false;
          if (res.meta.status === 500) {
            return this.$message.error(res.meta.msg)
          }
          this.JijiaDetail.dataList = res.data;
          this.JijiaDetail.total = res.total;
        },
        // 热表明细
        async getRbDetail() {
          this.loading = true
          this.loadingText = '数据加载中...'
          const { data: res } = await axios.post('../handler/board/ContainerShipPlanTrendDashBoard.ashx?action=getRbDetail', {
            type: 'getRbDetail',
            ...this.queryInfo,
            ...this.RbDetail.queryInfo
          });
          this.loading = false;
          if (res.meta.status === 500) {
            return this.$message.error(res.meta.msg)
          }
          this.RbDetail.dataList = res.data;
          this.RbDetail.total = res.total;
        },
        // 机加明细导出
        async exportJijiaDetail() {
          const config = {
            url: '../handler/board/ContainerShipPlanTrendDashBoard.ashx?action=exportJijiaDetail',
            data: { type: 'exportJijiaDetail', ...this.queryInfo, ...this.JijiaDetail.queryInfo }
          }
          exportExcelData(config, this);
        },
        // 热表明细导出
        async exportRbDetail() {
          const config = {
            url: '../handler/board/ContainerShipPlanTrendDashBoard.ashx?action=exportRbDetail',
            data: { type: 'exportRbDetail', ...this.queryInfo, ...this.RbDetail.queryInfo }
          }
          exportExcelData(config, this);
        },
        // 机加明细分页事件
        handleJiJiaDetailCurrentChange(newPage) {
          this.JijiaDetail.queryInfo.currentPage = newPage;
          this.getJiJiaDetail();
        },
        // 热表明细分页事件
        handleRbDetailCurrentChange(newPage) {
          this.RbDetail.queryInfo.currentPage = newPage;
          this.getRbDetail();
        },
        // 查询按钮
        handleBtnSearch() {
          this.getFromFactoryData();
          this.getToFactoryData();
        },
        // 承制分厂下拉框值变更
        tofactoryChange() {
          this.rbChartTitle = this.toFactoryList.filter(item => item.attributevalue === this.queryInfo.tofactoryCode)[0].factoryname + '完成率';
        },
        // 统计方式下拉框值变更
        selecttypeChange() {
          this.getFromFactoryData();
          this.getToFactoryData();
        }
      },
      mounted() {
        this.getFromFactoryList();
        this.getToFactoryList();
        this.setWeekList();
        this.setMonthList();
        this.setQuaterList();
        this.setYearList();
        this.getFromFactoryData();//主制分厂
        this.getToFactoryData();//承制分厂
      }
    })
  </script>
</body>

</html>